超緊繃!30天Vue.js學習日記 擁抱全家桶系列-Vue-Router(2)

大家好,我是IAN啦!之前在組件介紹有提到動態組件,那路由器呢?當然也有動態路由啦!(其實一點關連也沒有)今天我要介紹的就是動態路由,在官網中,它以一個不同id都需要渲染同一個組件作為例子,這是什麼意思呢?在這邊貼上官網範例:

<div id="app">
  <p>
    <router-link to="/user/foo">/user/foo</router-link>
    <router-link to="/user/bar">/user/bar</router-link>
  </p>
  <router-view></router-view>
</div>

const User = {
  template: `<div>User {{ $route.params.id }}</div>`
}

const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User }
  ]
})

const app = new Vue({ router }).$mount('#app')

在範例中,router-link的foo&bar會帶入$route.params.id
因此當我們切換這兩個link時,就會改變網頁上的內容

那我也在這邊嘗試了一下,提供一個輸入框,能夠輸入自己的名字,輸入以後就可以更改router-link中to屬性的值,進一步渲染USER組件中的內容,以下為範例:

<div id="app">
  <p>
    <router-link to="/HOME">HOME</router-link>
    <router-link :to="msg">{{msg}}</router-link>
  </p>
  <input type="text" value="" v-model="value" @change="changemsg(value)">
  <router-view></router-view>
</div>

const home = { template: '<div><h2>This is the home page</h2></div>' }
const USER = {
  template: `<div><h2>HELLO: {{ $route.params.id }}</h2></div>`
}

const router = new VueRouter({
  routes: [
    { path: '/home', component: home },
    { path: '/:id', component: USER }
  ]
})

const app = new Vue({ 
data(){
return{
  msg:'133',
  value:''
}
},
methods:{
changemsg(value){
  let vm = this;
  vm.msg = vm.value;
}
},
router 
}).$mount('#app')

在這個範例中利用了v-on去監聽change事件,當input box中的value值變動,就會呼叫changemsg更改msg的值,而msg的值則是套用在<router-link>中,這樣我們就可以做到不同的使用者會通過同一個組件渲染不同的內容啦~

本日範例下載:

https://drive.google.com/open?id=1BAPUNXsJtK-aKUA2YAnNiYu5800SgYWA

今天的教學就到這邊結束,由於時間緊湊(基礎篇好像花太多時間了qq),我們明天就會往下一個主題做介紹唷!